<%--
  Created by IntelliJ IDEA.
  User:
  Date: 2021/11/24
  Time: 19:14
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>采购信息</title>
</head>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/layui/layui/css/layui.css"/>
<script src="${pageContext.request.contextPath}/layui/layui/layui.js"></script>
<style>

    .layui-table-tool-self {
        display: none;
    }
    /*解决普通复选框无上边框问题*/
    .laytable-cell-1-0-0 .layui-icon {
        margin-top: 5px !important;
    }
    .laytable-cell-2-0-0 .layui-icon {
        margin-top: 5px !important;
    }
    /*解决横条复选框无上边框问题*/
    .layui-table-view .layui-form-checkbox{
        margin-top:0px !important;
    }
    .layui-form-select dl {
        max-height: 150px;
    }
    .layui-table-tool-temp {
        padding-right: 0px;
    }

</style>
<body style="margin-top: 40px">

<div class="demoTable layui-form">

    图书类型:
    <div class="layui-input-inline">
        <select id="selBookType" lay-filter="selType">
            <option value="">请选择</option>
        </select>
    </div>

    书名：
    <div class="layui-inline">
        <input class="layui-input" id="selBookName" autocomplete="off">
    </div>
    出版社：
    <div class="layui-inline">
        <input class="layui-input" id="selBookPublisher" autocomplete="off">
    </div>
    <button class="layui-btn  layui-btn-sm layui-btn-normal" id="serachBtn">搜索</button>
    <button id="reset" class="layui-btn   layui-btn-sm layui-btn-primary">重置</button>

</div>

<script type="text/html" id="toolbarDemo-left">
    <h1 style="text-align: center;font-size: 20px;">图书信息展示</h1>

</script>
<script type="text/html" id="toolbarDemo-right">

    <div style="text-align: center">
        <button style=" position: absolute;left: 5px;"  class="layui-btn layui-btn-sm"  lay-event="delAll" id="delAll">批量删除</button>

        <h1 style="text-align: center;display: inline-block; font-size: 20px;">采购信息展示</h1>
    </div>

</script>

<script type="text/html" id="inputBookCount">
    <input type="number" name="bookCount" value="1" class="layui-input">

</script>
<div class="layui-row">
    <div class="layui-col-md6">

        <table class="layui-hide" id="bookTab" lay-filter="test"></table>
        <div style="text-align: right">
            <button type="button" class="layui-btn layui-btn-sm" id="addBookPurchase">添加采购信息</button>
        </div>

    </div>
    <div class="layui-col-md6">


        <table class="layui-hide" id="purchaseTab" lay-filter="test-right"></table>

        <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-danger  layui-btn-sm" lay-event="del">删除</a>
        </script>
        <div>
            <div style="margin-left: 100px;display: inline">
                总数量：
                <span id="total_count">0</span>
            </div>
            <div style="margin-left: 150px ;display: inline">
                总金额(元)：
                <span id="total_price">0</span>
            </div>
        </div>
        <div style="text-align: right">
            <button class="layui-btn layui-btn-sm" id="sub">提交审核</button>
            <button class="layui-btn  layui-btn-sm layui-btn-primary" id="resetData">重置</button>

        </div>
    </div>
</div>


</body>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
    </div>
</script>
<script>
    layui.use(['table', 'jquery', 'form'], function () {
        var table = layui.table;
        var $ = layui.jquery;
        var form = layui.form;
        selectAllBook();
        //第一个实例
        // tableReload  当前表格对象
        //左侧表格
        function selectAllBook() {
            table.render({
                elem: '#bookTab'
                , url: '${pageContext.request.contextPath}/purchase/selectAllBook' //数据接口
                , page: true
                , limit: 8
                , limits: [8, 12, 18]
                //设置唯一id
                , id: "temp"
                , toolbar: '#toolbarDemo-left' //开启头部工具栏，并为其绑定左侧模板
                , cols: [[ //表头
                    /**
                     * field  ：从后台响应到前台的数据中 对应的字段
                     * title  ：页面表格的标题
                     * */
                    {type: 'checkbox', fixed: 'left'}
                    , {type: 'numbers', title: '序号'}
                    , {type: 'pid', title: '采购id', hide: 'true'}
                    , {field: 'bookid',hide:true, title: '图书编号'}
                    , {field: 'bookname', title: '书名'}
                    , {field: 'bookauthor', title: '作者'}
                    , {field: 'booktype', title: '类型',templet:function (data) {
                            return data.booktype.booktype;
                        }}
                    , {field: 'bookpublisher', title: '出版社'}
                    , {field: 'bookcount', title: '数量'}
                    , {field: 'bookmoney', title: '进价'}
                ]]
            });
        }

//存放右侧表格的数据
        var datas = [];
        // var pid = '';
        var search=location.search;
        var pid=search.slice(5);
        purchase();

        //后台传来阈值小于10的信息自动显示到右侧表格
        function purchase() {
            //判断pid为空时就添加阈值
            if (pid == "") {
                $.ajax({
                    url: '${pageContext.request.contextPath}/purchase/selectMinBookCount ',
                    dataType: "json",
                    type: "get",
                    //同步
                    async: false,
                    success: function (obj) {
                        // datas=obj;
                        //    console.log(obj)
                        //把后台拿到的数据赋值给右侧表格 datas
                        for (var i = 0; i < obj.length; i++) {
                            //把添加到右边的数据的书籍数量都改为1
                            obj[i].bookcount = 1;
                            //把每一行数据都放入在右边表格中
                            datas.push(obj[i]);
                        }
                        //显示数据完毕就直接计算总价和总数量
                        sumAndPrice();
                    }
                })
            } else {
                //根据pid查询采购的详情信息
                $.ajax({
                    url: '${pageContext.request.contextPath}/purchase/getpurchaseDetailBook',
                    dataType: "json",
                    data: {pid: pid},
                    type: "post",
                    //同步
                    async: false,
                    //obj为返回的 List<Book>
                    success: function (obj) {
                        // datas=obj;
                        // console.log(obj)
                        //把后台拿到的数据赋值给右侧表格 datas
                        for (var i = 0; i < obj.data.length; i++) {
                            //把每一行数据都放入在右边表格中
                            datas.push(obj.data[i]);
                        }
                        //显示数据完毕就直接计算总价和总数量
                        sumAndPrice();
                    }
                })
            }

            //右侧表格
            table.render({
                elem: '#purchaseTab'
                <%--,url:  '${pageContext.request.contextPath}/purchase/selectMinBookCount'--%>
                , data: datas
                , page: true
                , limit: 8
                , limits: [8, 12, 18]
                , toolbar: '#toolbarDemo-right' //开启头部工具栏，并为其绑定左侧模板*/
                //设置唯一id
                , id: "test-right"
                , cols: [[ //表头
                    //只显示到页面的数据，没显示的数据也要传到前台当前行
                    {type: 'checkbox', fixed: 'left'}
                    , {type: 'numbers', title: '序号'}
                    , {field: 'bookid',title: '图书编号'}
                    , {field: 'bookname', title: '书名'}
                    , {field: 'bookauthor', title: '作者'}
                    , {field: 'booktype', title: '类型',templet:function (t) {
                            return t.booktype.booktype;
                        }}
                    , {field: 'bookpublisher', title: '出版社'}
                    , {field: 'bookcount', title: '数量', edit: 'text'}
                    , {field: 'bookmoney', title: '进价'}
                    , {fixed: 'right', title: '操作', align: 'center', toolbar: '#barDemo'}
                ]]
            });
        }
3
        //头工具栏事件
        table.on('toolbar(test-right)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'delAll':
                    //批量删除的方法
                    delAll();
                    break;
            };
        });

        //批量删除的方法
        function delAll(){
            var checkStatus = table.checkStatus('test-right');
            var dataCheck = checkStatus.data;
            if (dataCheck.length == 0) {
                layer.msg('请选择要删除的数据', {icon: 3});
            } else {
                // 与去重逻辑相似
                var arr = [];
                // 拿datas的和被选中的每一个值对比
                for (let i = 0; i < datas.length; i++) {
                    for (var j = 0; j < dataCheck.length; j++) {
                        //找到相同的就结束这个循环
                        if (datas[i].bookId == dataCheck[j].bookId) {
                            break;
                        }
                    }
                    //内循环结束后 判断是否循环到最后一个  如果是 代表数据没有0被勾选
                    if (j == dataCheck.length) {
                        arr.push(datas[i])
                    }
                }
                layer.msg('删除成功', {icon: 1})
                //
                if (arr == undefined) {
                    arr = []
                }
                // 把 arr赋值给 datas
                datas = arr
                //重载
                table.reload('test-right', {
                    // 获取选中行的数据赋值给右侧表格
                    data: datas
                });
                sumAndPrice();
            }
        }




        //监听单元格编辑
        table.on('edit(test-right)', function (obj) {
            // 单元格编辑之前的值
            var oldText = $(this).prev().text();
            var value = obj.value //得到修改后的值
                , data = obj.data //得到修改后的当前行所有值
            //判断只能输入数字
            if (isNaN(data.bookcount)) {
                $(this).val(oldText);
                layer.msg('不能输入非法数字', {icon: 5});
            } else if (data.bookcount < 1) {
                $(this).val(oldText);
                layer.msg('请输入正整数', {icon: 5});
            } else {
                for (let i = 0; i < datas.length; i++) {
                    if (data.bookId == datas[i].bookId) {
                        //把修改后的值给数组
                        datas[i].bookcount = data.bookcount;
                    }
                }
                layer.msg('修改数量成功', {icon: 1});
                sumAndPrice();
            }
        });
        //监听表单select
        form.on('select(bookTypeTest)', function (data) {
            //获取被选中得内容
            var hBookType = data.elem[data.elem.selectedIndex].text;
            $("#hBookType").val(hBookType)
        });

        //查询左侧书名,出版社
        $("#serachBtn").click(function () {
            // form.render()
            table.reload('temp', {
                where: {
                    typeId: $("#selBookType").val(),
                    bookName: $("#selBookName").val(),
                    bookPublisher: $("#selBookPublisher").val()
                }
            });
        })

        //重置搜索框
        $("#reset").click(function () {
            $("#selBookType").val(""),
                $("#selBookName").val(""),
                $("#selBookPublisher").val("")
            //重新加载一下select框
            form.render();
            table.reload('temp', {
                where: {
                    typeId: null,
                    bookName: null,
                    bookPublisher: null
                }
            });
        })

        //左侧书类型下拉回显
        $.ajax({
            url: '/purchase/getAllBookType',
            dataType: "json",
            type: "post",
            //同步
            async: false,
            success: function (bookTypeObj) {
                var op = "";
                for (var i = 0; i < bookTypeObj.length; i++) {
                    op += "<option value='" + bookTypeObj[i].typeid + "'>" + bookTypeObj[i].booktype + "</option>"
                }
                $("#selBookType").append(op);
                $("#bookType").append(op);
                // 进行渲染  select下拉款的select    formdname 监听 "select", "selType"
                //更新全部
                form.render()
            }
        })


        //商品添加右侧采购信息
        $("#addBookPurchase").click(function () {
            //    获取选中的当前行
            var checkStatus = table.checkStatus('temp'); //temp 即为基础参数 id 对应的值
            // 获取选中行的数据 为json数组

            var data = checkStatus.data;
            if (data.length > 0) {
                for (var i = 0; i < data.length; i++) {
                    data[i].bookcount = 1;
                    datas.push(data[i]);
                }
                //调用去重的方法  添加的时候 去掉右侧表格中的相同数据
                datas = unique(datas);

                table.reload('test-right', {
                    // 获取选中行的数据赋值给右侧表格
                    data: datas
                });
            } else {
                layer.msg("老铁，请选中书籍信息")
            }
            //计算总价和数量
            sumAndPrice();
        })
        //
        // //把添加的书籍信息放入右侧表格
        // form.on('submit(formDemo)', function (data) {
        //     //判断表单里的数据是否与右侧表格重复
        //     // data.field 表单的数据
        //     var state = CheckBook(data.field);
        //     if (state == 1) {
        //         layer.msg('新增的采购商品已存在', {icon: 5})
        //     } else {
        //         //添加完成后表单清空
        //         $("#form")[0].reset();
        //         //把表单的数组全部数据转为json格式的 string类型
        //         var a = JSON.stringify(data.field)
        //         //将表单中的全部数据添加到右侧表格中
        //         //eval会执行json串中的表达式。
        //         var aa = eval('(' + a + ')')
        //         datas.push(aa);
        //         table.reload('test-right', {
        //             // 获取选中行的数据赋值给右侧表格
        //             data: datas
        //         });
        //         layer.closeAll();
        //         //计算总价和数量
        //         sumAndPrice();
        //     }
        //
        // })
        //行工具
        //监听工具条
        table.on('tool(test-right)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            if (layEvent === 'del') { //删除
                obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                //查找bookid的索引
                var index = datas.findIndex(item => item.bookid === data.bookid)
                // splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目
                datas.splice(index, 1);
                // data.bookId;
                layer.msg('删除成功', {icon: 1})
                //重载
                table.reload('test-right', {
                    // 获取选中行的数据赋值给右侧表格
                    data: datas
                });
                sumAndPrice();
            }
        });

        //数据去重
        function unique(arr) {
            var res = [];
            /**
             *    res    0              arr
             *    res[j].bookId       obj
             */
            for (var i = 0, len = arr.length; i < len; i++) {
                var bookid = arr[i].bookid;
                var objh = arr[i];
                for (var j = 0, jlen = res.length; j < jlen; j++) {
                    if (res[j].bookid == bookid) {
                        layer.msg('该采购的商品已存在', {icon: 5})
                        break;
                    }
                }
                //追加 循环结束这个j加一之后才相等
                if (jlen === j) res.push(objh);
            }
            return res;
        }

        //获取全部的信息  计算总价  数量  并回显到span中
        function sumAndPrice() {
            var count = 0
            var price = 0;
            //判断datas 是否有参数
            for (let i = 0; i < datas.length; i++) {
                count += Number(datas[i].bookcount);
                price += Number(datas[i].bookmoney) * Number(datas[i].bookcount);
            }
            $("#total_price").html(price);
            $("#total_count").html(count);
            /*  console.log(count)
              console.log(price)*/
        }

        // //表单校验订单页面的数据是否有重复  重复则弹框显示
        // function CheckBook(obj) {
        //     for (let i = 0; i < datas.length; i++) {
        //         if (datas[i].bookname == obj.bookname && datas[i].typeid == obj.typeid && datas[i].bookauthor == obj.bookauthor && datas[i].bookPublisher == obj.bookPublisher) {
        //             return 1;
        //         }
        //     }
        //     return 0;
        // }


        // 提交审核
        //添加采购信息
        $("#sub").click(function () {
            if (datas.length == 0) {
                layer.msg("老铁，请选择数据在提交")
            } else {
                // 获取所有的数据
                // 获取当前页的数据
                // console.log(table.cache["test-right"])
                //执行reject.jsp中重新提交时 先删除信息再根据pid进行添加
                if (pid != "") {
                    //根据pid驳回重新提交审核
                    for (let i = 0; i < datas.length; i++) {
                        // 删除数组中的json字段
                        delete datas[i].LAY_TABLE_INDEX;
                        delete datas[i].LAY_CHECKED;
                    }
                    $.ajax({
                        url: '${pageContext.request.contextPath}/purchase/delReject',
                        data: {
                            bookList: JSON.stringify(datas),
                            totalPrice: $("#total_price").html(),
                            totalCount: $("#total_count").html(),
                            pid: pid
                        },
                        type: "post",
                        dataType: "json",
                        success: function (delObj) {
                            console.log(delObj)
                            datas = [];
                            if (delObj.code===200) {
                                table.reload('test-right', {
                                    data: datas,
                                });
                                $("#total_price").html("0");
                                $("#total_count").html("0");
                                // window.parent.postMessage(delObj, '*')
                                layer.msg("hahha",{icon: 1})


                            }
                        }
                    })
                } else {
                    for (let i = 0; i < datas.length; i++) {
                        // 删除数组中的json字段
                        delete datas[i].LAY_TABLE_INDEX;
                        delete datas[i].LAY_CHECKED;
                    }
                    // 获取表格全部数据
                    console.log(datas)
                    $.ajax({
                        url: '/purchase/addPurchase',
                        dataType: "json",
                        //traditional: true,//这里设置为true
                        type: "post",
                        data: {
                            "bookList": JSON.stringify(datas),
                            "totalPrice": $("#total_price").html(),
                            "totalCount": $("#total_count").html()
                        },
                        //同步
                        success: function (bookTypeObj) {
                            if (bookTypeObj.code == 200) {
                                datas = [];
                                //重载表格
                                table.reload('test-right', {
                                    data: datas,
                                });
                                $("#total_price").html("0");
                                $("#total_count").html("0");
                                layer.msg("添加成功", {icon: 1})
                            } else {
                                layer.msg("sdadasdasda", {icon: 5})
                            }
                        }
                    })
                }
            }
        })
        //重置订单表
        $("#resetData").click(function () {
            datas = [];
            $("#total_price").html("0");
            $("#total_count").html("0");
            //test-right右侧表格唯一id
            //重载表格数据
            table.reload('test-right', {
                // 获取选中行的数据赋值给右侧表格
                data: datas
            });
        })
    })
</script>
</html>
